<template>
  <el-container class="course-detail">
    <el-container class="main-section">
      <el-main class="main-content">
        <CourseVideo :course="course" :selectedChapterIndex="selectedChapterIndex"/>
        <CourseComments :courseId="courseId" @likeComment="likeComment" @replyToComment="replyToComment"/>
      </el-main>
    </el-container>

    <CourseChapters :course="course" @selectChapter="selectChapter"/>

    <div v-if="!isCommenting" class="fixed-comment-btn">
      <el-button type="primary" @click="showCommentInput(0)">点击评论</el-button>
    </div>

    <div v-if="isCommenting" class="fixed-comment-input">
      <el-input
          type="textarea"
          v-model="newComment"
          placeholder="添加评论"
          class="comment-input"
      />
      <el-button type="primary" @click="submitComment()" class="comment-submit">提交</el-button>
      <el-button type="text" @click="cancelComment" class="comment-submit">取消</el-button>
    </div>
  </el-container>
</template>

<script setup>
// 导入 Vue 核心功能
import { ref, onMounted } from 'vue';
// 导入路由相关功能
import { useRoute } from "vue-router";
// 导入获取章节列表的 API
import { getChapters } from "@/apis/chapter.js";
// 导入课程视频组件
import CourseVideo from '@/views/course/components/CourseVideo.vue';
// 导入课程评论组件
import CourseComments from '@/views/course/components/CourseComments.vue';
// 导入课程章节组件
import CourseChapters from '@/views/course/components/CourseChapters.vue';
// 导入添加评论的 API
import { addComment } from "@/apis/comment.js";

// 获取当前路由对象
const route = useRoute();
// 从路由参数中提取课程 ID
const courseId = route.params.id;
// 定义课程数据引用
const course = ref({});
// 是否显示评论输入框
const isCommenting = ref(false);
// 新评论的内容
const newComment = ref('');
// 当前选中的章节索引
const selectedChapterIndex = ref(0);
// 回复评论时的父评论 ID
const selectedParentId = ref(0);

// 获取章节信息
const getChapter = async () => {
  const res = await getChapters(courseId);
  const courseData = res.data.courses;
  const chapterData = res.data.chapterVoList;

  // 构造课程对象
  course.value = {
    courseId: courseData.courseId,
    image: courseData.image,
    title: courseData.title,
    description: courseData.description,
    price: courseData.price,
    updatedAt: courseData.updatedAt,
    chapters: chapterData.map((chapter) => ({
      chapterId: chapter.chapterId,
      title: chapter.title,
      playUrl: chapter.playUrl,
      description: chapter.description,
      createdAt: chapter.createdAt,
      updatedAt: chapter.updatedAt,
    })),
  };
};

// 在组件挂载后执行
onMounted(() => {
  getChapter();
});

// 选择章节时触发
const selectChapter = (index) => {
  selectedChapterIndex.value = index;
};

// 显示评论输入框
const showCommentInput = (parentId) => {
  isCommenting.value = true;
  selectedParentId.value = parentId;
};

// 取消评论输入
const cancelComment = () => {
  isCommenting.value = false;
  newComment.value = '';
  selectedParentId.value = 0;
};

// 提交评论
const submitComment = async () => {
  if (newComment.value.trim() !== '') {
    const commentDTO = {
      courseId: courseId,
      content: newComment.value,
    };
    await addComments(commentDTO);
    newComment.value = '';
    isCommenting.value = false;
  }
};

// 添加评论的具体实现
const addComments = async (commentDTO) => {
  await addComment(commentDTO, selectedParentId.value);
};

// 点赞评论
const likeComment = (comment) => {
  console.log("点赞: ", comment);
};

// 回复评论
const replyToComment = (comment) => {
  isCommenting.value = true;
  selectedParentId.value = comment.commentId;
};
</script>


<style scoped>
.el-main {
  overflow-y: auto; /* 保持纵向滚动条 */
}

/* 对滚动条进行样式调整 */
.el-main::-webkit-scrollbar {
  width: 8px; /* 滚动条的宽度 */
}

.el-main::-webkit-scrollbar-thumb {
  background: rgb(246, 247, 248); /* 滚动条滑块的颜色 */
  border-radius: 10px; /* 滚动条滑块的圆角 */
}

.el-main::-webkit-scrollbar-track {
  background: #f1f1f1; /* 滚动条轨道的颜色 */
}

.course-detail {
  display: flex;
  height: 100vh;
}

.main-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 20px;
  overflow-y: auto;
}

.main-content {
  flex-direction: column;
}

.fixed-comment-btn {
  position: fixed;
  bottom: 20px;
  right: 20px;
}

.fixed-comment-input {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: white;
  padding: 10px 20px;
  border-top: 1px solid #e0e0e0;
  display: flex;
  align-items: center;
}

.comment-input {
  flex: 1;
  margin-right: 10px;
}

.comment-submit {
  margin-left: 10px;
}
</style>
